<template>

 <li :style="item.backgroundStyle" class="section">
     <div style="height:100%;width:1000px;margin: 0 auto;position:relative">
         <div style="display:inline-block;position:relative;margin-top:100px">
             <img src="@/images/officalPic/phone.png" alt="">
            <img :src="item.pic" alt="" style="" class="phoneContent">
         </div>
        
        <img src="'@/images/officalPic/'+item.pic" alt="">
        <img src="@/images/officalPic/yun.png" alt="" class="loadYun" style="left:-90px;top:80px">
        <img src="@/images/officalPic/yun.png" alt="" class="loadYun" style="left:280px;top:590px">
        <div class="scanApp">
        <div :style="'line-height:3em;text-align:center;color:'+item.color">
            <h3>{{item.title}}</h3>
            <p>{{item.tip}}</p>
        </div>
        <div class="loadCode">
            <img src="@/images/officalPic/downCode.png" alt="" style="width:136px;height:136px;padding-top:20px">
            <ul>
                
                <li class="loadAndroid"><a :href="version">Android下载</a></li>
                <li class="loadIos"><a href="https://itunes.apple.com/cn/app/%E7%BA%B3%E5%93%81%E7%BD%91-%E8%93%9D%E5%90%8E%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/id1437131868?mt=8">iPhone下载</a></li>
            </ul>
        </div>
     </div>
     </div>
     
 </li>
    
</template>

<script>
export default {
  name: "loadApp",
  data() {
    return {};
  },
  props:['item','version'],
};
</script>

<style scoped lang="scss">
    .phoneContent{
        position:absolute;
        width:255px;
        left: 27px;
        top:69px;

    }
    .loadYun{
        position: absolute;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: none;
        animation-play-state: running;
        // animation:mymove 0.5s;
    }
    .scanApp{
        display: inline-block;
        position:absolute;
        right:0px;
        top:160px;
    }
    .loadCode{
        width:197px;
        height:307px;
        background:rgba(255,255,255,1);
        box-shadow:0px 5px 14px 0px rgba(204,204,204,0.5);
        border-radius:16px;
        text-align: center;
    }
    .loadAndroid,.loadIos{
        margin: 0 auto;
        width:170px;
        height:48px;
        background:rgba(255,76,80,1);
        border-radius:24px;
        text-align: center;
        line-height:48px;
        margin-top:14px;
        a{
            color:#ffffff;
            text-decoration: none;
        }
    }
    @keyframes mymove
{
33% {left:0px;}
 67%{left:20px;}
100% {left:0px;}
}
</style>
